<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="../../modules/course/js/course_util.js"></script>
		<script type="text/javascript" src="../course/js/coursemgtservice.js"></script>
		<script type="text/javascript" src="../course/js/coursemgtcontroller.js"></script>
		<link rel="stylesheet" type="text/css" href="../course/css/course_theme.css">

		<script id="courseofferings-nav-tmpl" type="text/x-handlebars-template">
			<li {{generateNavId this}}>
			<a {{generateHref this}} data-toggle="tab">{{title}}<button class="close" type="button" style="font-size:15px; padding-left:10px; padding-top:0px">×</button>
			</a>
			</li>
		</script>

		<script id="courseoffering-content-tab-tmpl" type="text/x-handlebars-template">
			<div {{generateContentId this}} class="tab-pane">
			</div>
		</script>

		<script>
			$(document).ready(function() {
				CourseMgtController.registerHelpers();
				$("#course-nav").tab();
				$("#courseofferings-holder").load("../course/courseoffering_listing.html");
				$(".close").live('click', function(event) {
					var tabToClose = $(this).parent().parent().attr("id");
					var divToRemove = $(this).parent().attr("href");
					$("#"+tabToClose).remove();
					$(divToRemove).remove();
				});
			});
            
		</script>

	</head>
	<body>
		<div id="course-container" class="container">
			<div class="row">
				<div class="tabbable">
					<ul id="courseofferings-nav" class="nav nav-tabs" data-tabs="tabs">
						<li class="active">
							<a href="#courseofferings-holder" data-toggle="tab">Overview</a>
						</li>
					</ul>
					<div id="content-holder" class="tab-content" style="padding:10px">
						<div id="courseofferings-holder" class="tab-pane active"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
